<script>
    $(function () {
        $(".submenu").hide();
        $(".drop-menu-effect").mouseover(function () {
            $(this).find(".submenu").show();
        })
        $(".drop-menu-effect").mouseout(function () {
            $(this).find(".submenu").hide();
        })

        $(".ma").hide();
        // var na = $(".xuan").offset().top;
        var nav = $(".nav").offset().top;
        //获取要定位元素距离浏览器顶部的距离
        //滚动条事件
        $(window).scroll(function () {
            //获取滚动条的滑动距离
            var scro = $(this).scrollTop();
            // 滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定
            if (scro >= nav) {
                $(".nav").css({
                    "position": "fixed",
                    "top": 0,
                    "left": 0,
                    "z-index": 1000,
                    "margin": "0 auto",
                    "width": "100%"
                });
            } else if (scro < nav) {
                $(".nav").css({
                    "position": "relative",
                    "margin": "0 auto",
                });
            }

            var v = document.documentElement.scrollTop || document.body.scrollTop;
            if (v > 400) {
                $(".ma").fadeIn(800);
                $(".ma").css({
                    "position": "fixed",
                    "top": "375px",
                    "left": 0,
                    "z-index": 1000,
                })

            } else {
                $(".ma").fadeOut(800);
                $(".ma").css({
                    "position": "relative",

                })
            }

        });
        //轮播
        var c = 0;
        num = $(".slide >li").length;
        bianhua(0);
        $(".circle>li").each(function (o) {
            $(this).click(function () {
                bianhua(o);
            })
        })
        $(".jt").hide();
        $(".bigpicture").mouseover(function () {
            $(".jt").show();
        })
        $(".bigpicture").mouseout(function () {
            $(".jt").hide();
        })
        $("#next").click(function () {
            c++;
            if (c >= num) {
                c = 0;
            }
            bianhua(c);
        });
        $("#prev").click(function () {
            c--;
            if (c < 0) {
                c = 4;
            }
            bianhua(c);
        })

        function bianhua(n) {
            $(".slide >li").eq(n).fadeIn(800);
            $(".slide >li").eq(n).siblings().fadeOut(800);
            $(".circle>li").eq(n).addClass("active");
            $(".circle>li").eq(n).siblings().removeClass("active");
        }
        setInterval(function () {
            c++;
            if (c == num) {
                c = 0;
            }
            bianhua(c);
        }, 3000)

        // var c = 0;
        // num = $(".slide>li").length;//获取图片的个数
        // function donghua() {
        //     c++;
        //     if (c >= num) {
        //         c = 0;
        //     };
        //     bianhua(c);
        //     bianse(c);
        // }


        // bianhua(0);
        // $("#next").click(function () {
        //     donghua();
        // });

        // $("#prev").click(function () {
        //     c--;
        //     if (c < 0) {
        //         c = num - 1;
        //     };
        //     bianhua(c);
        //     bianse(c);
        // });

        // function bianhua(n) {
        //     $(".slide>li").eq(n).fadeIn(800);
        //     $(".slide>li").eq(n).siblings().fadeOut(800);
        // }
        // //圆点变色
        // function bianse(k) {
        //     $(".circle>li").eq(k).addClass("active");//第N个小圆点变红色，eq()是取第几个
        //     $(".circle>li").eq(k).siblings().removeClass("active");//其他小圆点取消红色
        // }
        // //点圆点，产生动画效果
        // $(".circle>li").click(function () {
        //     b = $(this).index();//index()获取对象的下标
        //     bianse(b);
        //     $(".slide>li").eq(b).fadeIn(800);
        //     $(".slide>li").eq(b).siblings().fadeOut(800);
        // });
        // //自动播放
        // var at = setInterval(donghua, 2000);
        // $("#prev").hover(function () {
        //     clearInterval(at);
        // });
        // $("#prev").mouseleave(function () {
        //     at = setInterval(donghua, 2000);
        // });
        // $("#next").hover(function () {
        //     clearInterval(at);
        // });
        // $("#next").mouseleave(function () {
        //     at = setInterval(donghua, 2000);
        // });
        // $(".slide").hover(function () {
        //     clearInterval(at);
        // });
        // $(".slide").mouseleave(function () {
        //     at = setInterval(donghua, 2000);
        // });





        $("#song>li").eq(0).children().children().click(function () {
            $(".bgcolor").css({ "background-color": "#eed5d8" });
            $(".buy").css({ "background-color": "#eed5d8", "color": "#a45457" });
            $(".tiao").css({ "background-color": "#eed5d8" });
            var element = document.getElementById('title');
            element.src = "images/title01.png";
            var element1 = document.getElementById('title2');
            element1.src = "images/title02.png";
            var element2 = document.getElementById('title3');
            element2.src = "images/title03.jpg";
            $(".slide li").eq(1).show();
            $(".slide li").eq(1).siblings().hide();
            $(".buy").hover(
                function () { $(this).css({ "background-color": "#fa7304", "color": "#fff" }); },
                function () { $(this).css({ "background-color": "#eed5d8", "color": "#a45457" }); }
            );
        })
        $("#song>li").eq(1).children().children().click(function () {
            $(".bgcolor").css({ "background-color": "#cfe0e7" });
            $(".buy").css({ "background-color": "#cfe0e7", "color": "#4d7982" });
            $(".tiao").css({ "background-color": "#cfe0e7" });
            var element = document.getElementById('title');
            element.src = "images/title001.png";
            var element1 = document.getElementById('title2');
            element1.src = "images/title002.png";
            var element2 = document.getElementById('title3');
            element2.src = "images/title003.jpg";
            $(".slide li").eq(2).show();
            $(".slide li").eq(2).siblings().hide();
            $(".buy").hover(
                function () { $(this).css({ "background-color": "#fa7304", "color": "#fff" }); },
                function () { $(this).css({ "background-color": "#cfe0e7", "color": "#4d7982" }); }
            );
        })
        $("#song>li").eq(2).children().children().click(function () {
            $(".bgcolor").css({ "background-color": "#cfd6e6" });
            $(".buy").css({ "background-color": "#cfd6e6", "color": "#515570" });
            $(".tiao").css({ "background-color": "#cfd6e6" });
            var element = document.getElementById('title');
            element.src = "images/title0001.png";
            var element1 = document.getElementById('title2');
            element1.src = "images/title0002.png";
            var element2 = document.getElementById('title3');
            element2.src = "images/title0003.jpg";
            $(".slide li").eq(3).show();
            $(".slide li").eq(3).siblings().hide();
            $(".buy").hover(
                function () { $(this).css({ "background-color": "#fa7304", "color": "#fff" }); },
                function () { $(this).css({ "background-color": "#cfd6e6", "color": "#515570" }); }
            );
        })
        $("#song>li").eq(3).children().children().click(function () {
            $(".bgcolor").css({ "background-color": "#dfcee0" });
            $(".buy").css({ "background-color": "#dfcee0", "color": "#5f527d" });
            $(".tiao").css({ "background-color": "#dfcee0" });
            var element = document.getElementById('title');
            element.src = "images/title1.png";
            var element1 = document.getElementById('title2');
            element1.src = "images/title2.png";
            var element2 = document.getElementById('title3');
            element2.src = "images/title3.jpg";
            $(".slide li").eq(4).show();
            $(".slide li").eq(4).siblings().hide();
            $(".buy").hover(
                function () { $(this).css({ "background-color": "#fa7304", "color": "#fff" }); },
                function () { $(this).css({ "background-color": "#dfcee0", "color": "#5f527d" }); }
            );
        })


        $(".buy").hover(
            function () { $(this).css({ "background-color": "#fa7304", "color": "#fff" }); },
            function () { $(this).css({ "background-color": "#dfcee0", "color": "#5f527d" }); }
        );
        var b = 0;

        $(".buy").click(function () {
            b++;
            $(".num").text(b, 0);
            mu = parseFloat($(".avg").text());
            nu = parseFloat($(this).parent().children().children(".number").text());
            var avg;
            avg = mu + nu;
            $(".avg").text(function () {
                return avg
            });
            $("t")
        })









    })


</script>